<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        height: 500px;
        border-bottom: 10px black solid;
        margin:  50px auto;
        overflow: hidden;
    }
    .box1{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #bfa;
        animation: ball 2s forwards ease-in alternate 3;
    }

    @keyframes ball {
        from{
            margin-top: 0;
        }
        20%,60%,to{
            margin-top: 400px;
            animation-timing-function: ease-in;
        }
        40%{
            margin-top: 100px;
        }
        80%{
            margin-top: 200px;
        }
    }
</style>
<body>
<div class="outer">

    <div class="box1"></div>
</div>
</body>
</html>
